<template>
    <div
        class="navbar"
        :style="{paddingTop: barHeight}"
    >
        <div
            :class="['back d-flex middle', ifBackBtn ? '' : 'single']"
            :style="{top: top}"
        >
            <icon
                class="iconfont icon-fanhui flex-1"
                @click="toBack"
                v-show="ifBackBtn"
            ></icon>
            <icon
                class="iconfont icon-fanhui1 flex-1"
                @click="toHome"
            ></icon>
        </div>
        <p class="title">{{ title }}</p>
    </div>
</template>
<script>
import { getSystemInfo, getMenuInfo } from "@/utils";
export default {
    props: {
        title: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            ifBackBtn: true, // 判断导航栏是否有返回按钮
            barHeight: "", // 状态栏高度
            top: "" // 导航距离状态栏高度
        };
    },
    onReady() {
        this.ifBackBtn = getCurrentPages().length > 1; // 判断当前页面栈个数
        const systemInfo = getSystemInfo();
        this.barHeight = systemInfo.statusBarHeight + "px";
        const menuInfo = getMenuInfo();
        this.top = menuInfo.top - systemInfo.statusBarHeight + "px";
    },
    methods: {
        // 返回上一页
        toBack() {
            wx.navigateBack({
                delta: 1
            });
        },
        // 返回首页
        toHome() {
            wx.reLaunch({
                url: "/pages/index/main"
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.navbar {
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    // padding-bottom: 5px;
    .back {
        position: relative;
        left: 8px;
        overflow: hidden;
        width: 100px;
        height: 32px;
        line-height: 32px;
        border-radius: 20px;
        font-size: 12px;
        border: 1px solid #eee;
        text-align: center;
        z-index: 100;
        margin-bottom: 15px;
        .icon-fanhui {
            border-right: 1px solid #eee;
        }
    }
    .single {
        width: 60px;
    }
    .title {
        position: relative;
        bottom: 20px;
        text-align: center;
        font-size: 14px;
    }
}
</style>
